<script lang="ts" setup>
import type { Column, TableRequest } from '@king-one/antdv'
import { companyApis } from '@/apis'
import { KProTable } from '@king-one/antdv'
import { Tag } from 'ant-design-vue'
import { h } from 'vue'
import ReceiveSeal from './ReceiveSeal.vue'
import ViewUser from './ViewUser.vue'

const visible = reactive({
  user: false,
  receive: false,
})
const dataInfo = reactive({
  companyName: '',
  companyId: '',
})
const columns = ref<Column[]>([
  {
    title: '企业名称',
    dataIndex: 'companyName',
    align: 'center',
    ellipsis: true,
    width: '200px',
  },
  {
    title: '统一社会信用代码',
    dataIndex: 'creditCode',
    key: 'creditCode',
    align: 'center',
    ellipsis: true,
    width: '200px',
  },
  {
    title: '法人姓名',
    dataIndex: 'legalName',
    key: 'legalName',
    align: 'center',
    ellipsis: true,

    width: '200px',
  },
  {
    title: '法人证件号',
    dataIndex: 'legalPhone',
    key: 'legalPhone',
    align: 'center',
    ellipsis: true,
    hideInForm: true,
    width: '200px',
  },
  {
    title: '认证状态',
    dataIndex: 'authStatus',
    align: 'center',
    key: 'authStatus',
    hideInForm: true,
    width: 120,
    customRender: ({ text }) => {
      return h(Tag, {
        color: text ? 'success' : 'error',
      }, {
        default: () => text ? '正常' : '禁用',
      })
    },
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    align: 'center',
    ellipsis: true,
    width: '200px',
    valueType: 'dateRange',
    hideInForm: true,
    fieldProps: {
      valueFormat: 'YYYY-MM-DD',
    },
  },
  {
    title: '操作',
    dataIndex: 'actions',
    align: 'center',
    hideInForm: true,
    width: 200,
  },
])

const tableRef = ref()

const request: TableRequest = async (params) => {
  try {
    const res = await companyApis.getCompanyList(params)
    console.log(res)

    return {
      data: res.data.list,
      success: true,
      total: res.data.total,
    }
  }
  catch (error) {
    return {
      data: [],
      success: false,
      total: 0,
    }
  }
}
function handleReceive(record: any) {
  Object.assign(dataInfo, {
    companyName: record.companyName,
    companyId: record.id,
  })
  visible.receive = true
}
function handleView(record: any, key: any) {
  // eslint-disable-next-line no-alert
  alert('待开发')
}
</script>

<template>
  <div class="w-full h-full  rounded-8px p-10px">
    <KProTable
      ref="tableRef"
      :columns="columns"
      :antd-table-props="{
        bordered: true,
      }"
      :request="request"
      :page-size="10"
    >
      <template #headerCell="{ column }">
        <div v-if="column.key === 'authStatus'">
          <span mr-5>认证状态</span>
          <a-tooltip title="企业未认证w时，无法领取企业印章">
            <question-circle-outlined />
          </a-tooltip>
        </div>
      </template>
      <template #bodyCell="{ record, column }">
        <template v-if="column.dataIndex === 'actions'">
          <span>
            <a-button type="link" :disabled="record.authStatus === 0" px-0 @click="handleReceive(record)">
              领章</a-button>
            <a-divider type="vertical" />
            <a-dropdown>
              <a class="ant-dropdown-link" @click.prevent>
                更多
                <DownOutlined />
              </a>
              <template #overlay>
                <a-menu @click="({ key }) => handleView(record, key)">
                  <a-menu-item key="user">
                    <a href="javascript:;">查看用户</a>
                  </a-menu-item>
                  <a-menu-item key="stamp">
                    <a href="javascript:;">查看印章</a>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </span>
        </template>
      </template>
    </KProTable>
    <ViewUser v-model="visible.user" :company-name="dataInfo.companyName" :company-id="dataInfo.companyId" />
    <ReceiveSeal v-model="visible.receive" :company-name="dataInfo.companyName" :company-id="dataInfo.companyId" />
  </div>
</template>
